<template>
  <div>
    <h3 class="title">
      <span v-if="formDis ===false && isEdit === false">课程详情</span>
      <!-- <span v-if="isEdit">编辑试题</span>
      <span v-if="formDis === true">查看详情</span> -->
      <!-- {{ $route.query }} -->
    </h3>
    <!-- {{ ruleForm.courseId }} -->
    <div v-if="questionList.length" style="text-align:center" >
      <el-button :type="tabNum===0?'primary':''" @click="tabNum=0">课程</el-button>
      <el-button :type="tabNum===1?'primary':''" @click="tabNum=1">试题</el-button>
      <el-button :type="tabNum===2?'primary':''" @click="tabNum=2">得分</el-button>
      <hr class="line">
    </div>

    <div v-if="tabNum===0">
      <!-- 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容  -->
      <!-- 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容  -->
      <!-- 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容  -->
      <!-- 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容 课程内容  -->
      <el-form
        ref="prductForm"
        :disabled="formDis"
        :model="prductForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        style="margin-top: 20px;">
        <el-form-item :prop="formDis?'':'name'" label="课程名称">
          <el-col :span="8" >
            <el-input
              v-model="prductForm.name"
              placeholder="请输入征集活动名称"
              type="text"
              maxlength="40"
              show-word-limit
            />
          </el-col>
        </el-form-item>
        <el-form-item label="课程介绍" prop="introduction">
          <div style="width:98%">
            <div v-if="formDis" class="tin_box" v-html="prductForm.introduction" />
            <tinymce v-else v-model="prductForm.introduction" :height="260" :disabled="tinymceDis" />
          </div>
        </el-form-item>
        <el-form-item :prop="formDis?'':'categoryId'" label="课程类别">
          <el-col :span="8" >
            <el-select v-model="prductForm.categoryId">
              <el-option v-for="(item,index) in getCategoryList" :key="index" :value="item.id" :label="item.categoryName"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item :class="formDis?'':'add_tip'" label="上传封面图" prop="'cost'">
          <el-col :span="24" >
            <div style="width:320px" class="fl">
              <div class="thumbnail">
                <img v-show="prductForm.imgUrl" :src="prductForm.imgUrl" alt="">
              </div>
              <div v-if="!formDis" class="uploadBox">
                <!-- <vueCropper
                  :fixed-number="[16,8]"
                  :limit="1"
                  img-type="slt"
                  class="upload-demo fl"
                  @modalShowFn="getModalStatus" /> -->
                <el-button v-show="prductForm.imgUrl" class="btn_clear fr" size="small" type="info" @click="clearPic()">清除</el-button>
              <!-- <p slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/gif文件</p> -->
              </div>
            </div>
          </el-col>
        </el-form-item>
        <el-form-item :class="formDis?'':'add_tip'" label="上传课程视频" prop="'cost'">
          <el-col :span="24" >
            <div style="width:340px" class="fl">
              <div class="thumbnail_video">
                <!-- <img v-show="prductForm.imgUrl" :src="prductForm.imgUrl" alt=""> -->
                <video
                  v-if="prductForm.videoUrl"
                  :poster="prductForm.imgUrl"
                  :src="prductForm.videoUrl"
                  class="avatar video-avatar"
                  style="width: 320px;height:180px"
                  controls="controls">
                  您的浏览器不支持视频播放
                </video>
              </div>
              <div v-if="!formDis" class="uploadBox">
                <!-- <el-upload
                  ref="videoUpload"
                  :before-remove="beforeRemove"
                  :before-upload="beforeAvatarUpload"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                  :action="actionUrl"
                  :http-request="sliderRequest"
                  :with-credentials= "false"
                  multiple
                  class="upload-demo fl">
                  <el-button size="small" type="primary" plain>选择视频</el-button>
                  <el-button v-show="prductForm.imgUrl" class="btn_clear fr" size="small" type="info" @click="clearVideo()">清除</el-button>
                </el-upload> -->

                <!-- <el-progress v-if="progressFlag" :percentage="loadProgress"/> -->
                <br>
              <!-- <p slot="tip" class="el-upload__tip">只能上传mp4/ogg/flv/avi/wmv/rmvb/mov文件</p> -->
              </div>
            <!-- <div class="fl tipBox">
              <p slot="tip" class="el-upload__tip">只能上传mp4/ogg/flv/avi/wmv/rmvb/mov文件</p>
            </div> -->
            </div>
          </el-col>
        </el-form-item>
        <!-- {{ prductForm }} -->
        <el-form-item :class="formDis?'':'add_tip'" label="个人信息参数" prop="manageVariableParameters">
          <el-col :span="18" >
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"/>
            <el-checkbox-group v-model="prductForm.manageVariableParameters" @change="handleCheckedArgumentsChange">
              <el-checkbox v-for="(item, index) in personArgument" :key="index" :label="item.attribute" :value="item" style="width:130px;">{{ item.attribute }}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
        <el-form-item style="margin-top:40px">
          <!-- 编辑 -->
          <el-button v-preventReClick v-if="isEdit" type="primary" @click="submitForm('prductForm')">确定</el-button>
          <!-- 新增 -->
          <el-button v-preventReClick v-if="!isEdit && !formDis" type="primary" @click="submitForm('prductForm')">确定</el-button>
          <!-- 取消 -->
          <el-button v-preventReClick v-if="!formDis" :disabled="false" @click="$router.go(-1)">关闭</el-button>
          <!-- <el-button @click="resetForm('prductForm')">重置</el-button> -->
        </el-form-item>

      </el-form>
    </div>
    <div v-if="tabNum===1">
      <!-- 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容  -->
      <!-- 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容  -->
      <!-- 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容 试题内容  -->
      <div v-if="questionList.length">
        <ul v-if="isEdit || formDis" class="score_number">
          <li v-for="(item, index) in questionList" :class="{'active': courseNum === (index+1)}" :key="index" @click="chooseScore(index)">
            <span>{{ item.number }}</span><br>
          </li>
        </ul>
        <!-- +++{{ $route.query.id }}+++ -->
        <el-form ref="ruleForm" :disabled="formDis" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" style="margin-top: 20px;">
          <!-- {{ questionList.length }}<br><br> -->
          <!-- {{ questionList }} -->
          <!-- {{ ruleForm }} -->
          <el-form-item :label="`试题${ruleForm.number}题目`" prop="title">
            <el-col :span="10" >
              <el-input v-model="ruleForm.title" type="textarea" maxlength="100" />
            </el-col>
          </el-form-item>
          <!-- <el-form-item :label="`试题${ruleForm.number}分值`" prop="score">
            <el-col :span="10" >
              <el-input v-model="ruleForm.score" type="number" />
            </el-col>
          </el-form-item> -->
          <el-form-item :label="`试题${ruleForm.number}选项`" class="add_tip" prop="discount">
            <el-form-item prop="optionsA">
              <el-col :span="1" style="text-align: center;">A:</el-col>
              <el-col :span="9" >
                <el-input v-model="ruleForm.optionsA"/>
              </el-col>
            </el-form-item>
            <el-form-item prop="optionsB" class="mt10">
              <el-col :span="1" style="text-align: center;">B:</el-col>
              <el-col :span="9" >
                <el-input v-model="ruleForm.optionsB"/>
              </el-col>
            </el-form-item>
            <el-form-item prop="optionsC" class="mt10">
              <el-col :span="1" style="text-align: center;">C:</el-col>
              <el-col :span="9" >
                <el-input v-model="ruleForm.optionsC"/>
              </el-col>
            </el-form-item>
            <el-form-item prop="optionsD" class="mt10">
              <el-col :span="1" style="text-align: center;">D:</el-col>
              <el-col :span="9" >
                <el-input v-model="ruleForm.optionsD"/>
              </el-col>
            </el-form-item>
          </el-form-item>
          <el-form-item :label="`试题${ruleForm.number}答案`" prop="answer">
            <el-col :span="6" >
              <el-select v-model="ruleForm.answer" placeholder="请选试题答案">
                <el-option v-for="(item, index) in chooseList" :value="item" :label="item" :key="index"/>
              </el-select>
            </el-col>
          </el-form-item>
          <!-- <el-form-item>
        <el-button v-preventReClick v-if="questionList.length<=10" type="primary" @click="nextQuestion('ruleForm')">添加试题</el-button>
        <el-button v-preventReClick type="success" @click="submitForm('ruleForm')">提交</el-button>
        <el-button v-preventReClick v-if="questionList.length>1" type="danger" @click="delCur('ruleForm')">删除当前试题</el-button>
      </el-form-item> -->
        </el-form>
      </div>
      <hr>
      <el-button v-preventReClick class="bottom_btn" @click="$router.go(-1)">关闭</el-button>
    </div>
    <!-- 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分  -->
    <!-- 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分  -->
    <!-- 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分  -->
    <!-- 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分 得分  -->
    <div v-if="tabNum===2">
      <div>
        <el-button type="primary" class="ml10" @click="toAward">颁奖</el-button>
        <el-button plain type="primary" class="ml10" @click="toDownLoadExcel">导出</el-button>
        <br>
      </div>
      <br>
      <el-table
        v-loading="listLoading"
        :data="pointList"
        element-loading-text="加载中请稍后"
        border
        fit
        highlight-current-row>
        <template slot="empty">
          <div class="noData">暂无数据</div>
        </template>
        <el-table-column align="center" label="序号" width="60">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="得分" width="">
          <template slot-scope="scope">
            {{ scope.row.score }}
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            {{ scope.row.gender===1?'男':'女' }}
          </template>
        </el-table-column>
        <el-table-column label="民族" width="60">
          <template slot-scope="scope">
            {{ scope.row.nation }}
          </template>
        </el-table-column>
        <el-table-column label="年龄" width="60">
          <template slot-scope="scope">
            {{ scope.row.age }}
          </template>
        </el-table-column>
        <el-table-column label="身份证" width="110">
          <template slot-scope="scope">
            {{ scope.row.idcard }}
          </template>
        </el-table-column>
        <el-table-column label="爱好及特长" width="110">
          <template slot-scope="scope">
            {{ scope.row.hobbies }}
          </template>
        </el-table-column>
        <el-table-column label="学校">
          <template slot-scope="scope">
            {{ scope.row.school }}
          </template>
        </el-table-column>
        <el-table-column label="年级">
          <template slot-scope="scope">
            {{ scope.row.grade | filterGrade }}
          </template>
        </el-table-column>
        <el-table-column label="个人照片">
          <template slot-scope="scope">
            <div v-if="scope.row.imgUrl" class="img_box" @click="checkImg(scope.row.imgUrl)">
              <img :src="scope.row.imgUrl" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号" width="110">
          <template slot-scope="scope">
            {{ scope.row.phoneNum }}
          </template>
        </el-table-column>
        <el-table-column label="联系地址" width="110">
          <template slot-scope="scope">
            {{ scope.row.mailAddress }}
          </template>
        </el-table-column>
        <el-table-column label="邮编" width="110">
          <template slot-scope="scope">
            {{ scope.row.postcode }}
          </template>
        </el-table-column>
        <el-table-column label="邮箱" width="110">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column label="省">
          <template slot-scope="scope">
            {{ scope.row.province }}
          </template>
        </el-table-column>
        <el-table-column label="市">
          <template slot-scope="scope">
            {{ scope.row.city }}
          </template>
        </el-table-column>
        <el-table-column label="指导教师">
          <template slot-scope="scope">
            {{ scope.row.teacherName }}
          </template>
        </el-table-column>
        <el-table-column label="工作单位">
          <template slot-scope="scope">
            {{ scope.row.teacherJobUnit }}
          </template>
        </el-table-column>
        <el-table-column label="教师联系电话" width="110">
          <template slot-scope="scope">
            {{ scope.row.teacherPhone }}
          </template>
        </el-table-column>
        <el-table-column label="颁奖状态">
          <template slot-scope="scope">
            <span v-if="scope.row.awardsStatus===0">未颁奖</span>
            <span v-if="scope.row.awardsStatus===1">已颁奖</span>
          </template>
        </el-table-column>
        <el-table-column label="获奖情况">
          <template slot-scope="scope">
            {{ scope.row.level || '' }}
          </template>
        </el-table-column>
        <el-table-column label="获奖证书">
          <template slot-scope="scope">
            <div v-if="scope.row.awardImg" class="img_box" @click="checkImg(scope.row.awardImg)">
              <img :src="scope.row.awardImg" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注说明">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="答题时间" width="154">
          <template slot-scope="scope">
            {{ scope.row.commitTime }}
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
      <el-dialog
        :visible.sync="dialogVisible"
        width="50%">
        <div style="width:100%; height:100%">
          <img :src="dialogImgUrl" style="width:100%;" alt="">
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关   闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import config from '@/utils/config';
import { addCours, editCours } from '@/api/course'
import Tinymce from '@/components/Tinymce'
import { GetQiniuToken } from '@/utils/qiniuUpload.js'
import { Message } from 'element-ui'
import { addQuestion, getQuestionInfo, getCourseScoreList, getCourseInfo, getCategoryList } from '@/api/course'

import { getVariableParameters, getRegistryInfo } from '@/api/registry'
import Pagination from '@/components/Pagination'

export default {
  components: { Tinymce, Pagination },
  filters: {
    filterGrade(num) {
      const map = {
        '0': '幼儿园',
        '1': '小学一年级',
        '2': '小学二年级',
        '3': '小学三年级',
        '4': '小学四年级',
        '5': '小学五年级',
        '6': '小学六年级',
        '7': '初中一年级',
        '8': '初中二年级',
        '9': '初中三年级',
        '10': '高中一年级',
        '11': '高中二年级',
        '12': '高中三年级',
        '13': '大学及以上'
      }
      return map[num]
    }
  },
  data() {
    return {
      tabNum: 0,
      chooseList: ['A', 'B', 'C', 'D'],
      courseNum: 1,
      courseId: '',
      questionList: [
      ],
      ruleForm: {
        courseId: '',
        number: 0,
        title: '',
        score: '',
        optionsA: null,
        optionsB: null,
        optionsC: null,
        optionsD: null,
        answer: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入试题题目', trigger: 'blur' }
        ],
        score: [
          { required: true, message: '请输试题分值', trigger: 'blur' },
          { pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '数值需大于0', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请选择试题答案', trigger: 'change' }
        ]
      },
      formDis: false,
      tinymceDis: false,
      isEdit: false,
      personArgument: [],
      allPersonArgument: [],
      checkAll: false,
      isIndeterminate: false,
      // --------------------------------------------------------------------------------
      prductForm: {
        name: '', // 商品名称
        categoryId: '', // 商品类型
        introduction: '', // 课程介绍
        imgUrl: '', // 封面
        videoUrl: '', // 视频地址
        manageVariableParameters: []
      },
      getCategoryList: [],
      // ----------------------得分------------------------------------------------------
      dialogVisible: false,
      dialogImgUrl: '',
      pointList: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      sourseName: ''
    }
  },
  computed: {
  },
  watch: {
    ruleForm: {
      handler: function(nowVal, oldVal) {
        this.$store.dispatch('AddlistenForm', this.ruleForm).then(() => {
        }).catch((err) => {
          Message.error(err.err)
        })
      },
      deep: true
    }
  },
  created() {
    this.ruleForm.number = this.courseNum
    this.ruleForm.courseId = this.courseId
    this.questionList.push(this.ruleForm)
    // 获取所有课程类型
    this.getCategoryListFn()
    // 查询所有可变参数
    this.getVariableParametersFn()

    // -----得分-------
    // this.fetchData()
  },
  mounted() {
    const _self = this;
    console.log('this.$route.query:', JSON.stringify(this.$route.query))
    if (this.$route.query && JSON.stringify(this.$route.query) !== '{}') {
      this.isEdit = this.$route.query.hasOwnProperty('isEdit') ? _self.$route.query.isEdit : false;
      this.formDis = Boolean(this.$route.query.isLook)
      this.tinymceDis = Boolean(this.$route.query.isLook)
      const a = this.$route.query
      if (a.hasOwnProperty('isLook')) {
        this.getQuestionInfoFn(this.$route.query.id)
        this.getCourseInfoFn(this.$route.query.id)
        this.fetchData(this.$route.query.id)
        delete a.isLook;
      }
      if (a.hasOwnProperty('isEdit')) {
        // this.dataToHtml(a)
        // this.getTeacherList()
        // alert('编辑')
        delete a.isEdit;
      }
    } else { // 新增
    }
    // this.uploadData.token = GetQiniuToken().uploadToken
    this.ruleForm.courseId = this.$route.query.id
    // console.log('this.$route.query::::::', this.$route.query)
    this.sourseName = this.$route.query.name
    // console.log('this.$route.query:', this.$route.query)
    console.log('vuex:::', this.$store.getters.detailTab)
    this.tabNum = this.$store.getters.detailTab
    // this.$store.getters.ruleForm
  },
  methods: {
    // ----------------------课程-----------------------
    // 全选按钮
    handleCheckAllChange(val) {
      this.ruleForm.manageVariableParameters = val ? this.allPersonArgument : [];
      this.isIndeterminate = false;
    },
    handleCheckedArgumentsChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.allPersonArgument.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.allPersonArgument.length;
    },
    // 查询所有可变参数
    getVariableParametersFn() {
      getVariableParameters().then(res => {
        console.log(res)
        if (res.code === '200') {
          this.personArgument = res.data
          res.data.forEach(item => {
            this.allPersonArgument.push(item.attribute)
          })
        }
      })
    },
    // 选择某一道题
    chooseScore(index) {
      this.courseNum = index + 1
      this.ruleForm = this.questionList[index]
      this.$refs['ruleForm'].clearValidate() // 去掉校验
      console.log(index)
    },
    getQuestionInfoFn(courseId) {
      getQuestionInfo({ courseId }).then(res => {
        if (res.code === '200') {
          console.log('试题', res)
          this.questionList = res.data
          this.ruleForm = res.data[0]
          const obj = Object.assign([], this.ruleForm.manageVariableParameters)
          const arr = []
          console.log(obj)
          obj.forEach(item => {
            arr.push(item.attribute)
          })
          this.ruleForm.manageVariableParameters = arr
        }
        console.log(res)
      })
    },

    getCourseInfoFn(id) {
      getCourseInfo({ id }).then(res => {
        if (res.code === '200') {
          this.prductForm = res.data
          console.log('课程内容：', res.data)
          const arr = []
          this.prductForm.manageVariableParameters.forEach(item => {
            arr.push(item.attribute)
          })
          this.prductForm.manageVariableParameters = arr
          // 题号排序
          this.eachQuestion()
          // this.ruleForm = res.data[0]
        }
        console.log(res)
      })
    },
    // 获取所有课程类别
    getCategoryListFn() {
      getCategoryList(this.pageQuery).then(res => {
        if (res.code === '200') {
          this.getCategoryList = res.data.list
        } else {
          Message.error(res.message + '' + res.data)
        }
      })
      console.log()
    },
    eachQuestion() {
      const arr = []
      for (let i = 0; i < this.questionList.length; i++) {
        this.questionList[i].number = i + 1
        arr.push(this.questionList[i])
      }
      return arr
    },
    //   ----------------------------------得分--------------------------------------
    fetchData(id) {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, { courseId: id })

      getCourseScoreList(newData).then(response => {
        console.log(response)
        if (response.code === '200') {
          this.pointList = response.data.list
          console.log('订单数据：', this.pointList)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    },
    toAward(id) {
      const query = { isEdit: true, id: this.ruleForm.courseId, name: this.sourseName }
      this.$router.push({
        path: 'award',
        query
      })
    },
    toDownLoadExcel() {
      console.log(this.ruleForm.courseId)
      window.location.href = config.BaseUrl + '/course/score/download?courseId=' + this.ruleForm.courseId
    },
    connectAguments() {
      let str = '?'
      for (const key in this.search) {
        if (this.search[key]) {
          str += key + '=' + this.search[key] + '&'
        }
      }
      console.log(str)
      if (str === '?') { // 说明没有带参数
        return ''
      } else {
        return str
      }
    },
    checkImg(url) {
      this.dialogVisible = true
      this.dialogImgUrl = url
    }
  }

}
</script>

<style>
    .el-checkbox+.el-checkbox{
        margin-left:0
    }
    .el-checkbox{
        margin-right:25px;
    }
    .img_box{
      width: 50px;
      height: 50px;
      background:#f5f5f5;
    }
    .img_box img{
        width: 100%;
        height: 100%;
    }
    .mt10{margin-top:10px;}
    .title{
        margin-left:20px;
    }
    .table{
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        margin-top: 20px;
        line-height: 30px;
    }

    .table thead{
        line-height: 30px;
        text-align: center;
        background: #f9f9f9;
        font-weight: bold;
        color: #333;
    }
    .table tbody{
        color: #666;
    }
    .table tbody td:nth-of-type(1){
        text-align: center;
    }
    .lineHeight{
        line-height: 40px;
    }
    .table td{
        border: 1px solid #ddd;
        padding: 5px 10px;
    }

  .tip {
    color: red;
  }
  .tin_box {
    border: 1px solid #ddd;
    padding: 0 10px 0 10px;
    color:#666;
  }
  .line{
    text-align: center;
    border:none;
    border-bottom:1px solid #ddd;
    margin:10px 0;
  }
  .score_number{
      width: 96%;
    overflow: hidden;
  }
  .score_number li{
      width: 3%;
      height: 40px;
      line-height: 40px;
      margin: 0 1% 1% 0;
      border:1px solid #ddd;
      float: left;
      text-align: center;
      transition: all .2s;
      color:#666;
      cursor: pointer;
  }

  .score_number li:hover{
      background: cornflowerblue;
      color: #fff;
  }

  .score_number .active{
      background: cornflowerblue;
      color: #fff;
  }

  .score_number li span:nth-of-type(1){
      font-weight: bold;
  }
  .score_number li span:nth-of-type(2){
    display: inline-block;
    width:80%;
    font-size: 14px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .bottom_btn{
      margin:0 0 40px 40px;
  }
  hr{
      border:1px solid #ddd;
  }
  .thumbnail{
      width: 400px;
  }

  .thumbnail img {
      width: 100%;
  }
</style>
